<template>
  <div class="box">
    <div class="img">
      <img
        @click="btn(item)"
        style="width: 300px"
        v-for="item in img"
        :src="item"
        alt=""
      />
    </div>
    <div class="pre" @click="del" v-show="show">
      <img class="preimg" :src="preimg" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      img: [
        'https://2426328536-1316373723.cos.ap-guangzhou.myqcloud.com/%20%2810%29.jpg',
        'https://2426328536-1316373723.cos.ap-guangzhou.myqcloud.com/%20%2822%29.jpg',
        'https://2426328536-1316373723.cos.ap-guangzhou.myqcloud.com/%20%2827%29.jpg'
      ],
      preimg: '',
      show: false,
      w: 300 + 'px'
    }
  },
  created () {},
  methods: {
    btn (item) {
      this.preimg = item
      this.show = true
      const prei = document.querySelector('.preimg')
      prei.onwheel = function (e) {
        console.log(e)
        // 小于0向上滚动
        if (e.deltaY < 0) {
          console.log(e.target.width)
          e.target.width += e.target.width * 1.2 + 'px'
          e.target.height += e.target.height * 1.2 + 'px'
        } else {
          //   prei.style.width = prei.style.width * 0.8 + 'px'
          //   prei.style.height = prei.style.width * 0.8 + 'px'
        }
      }
      console.log(prei)
    },
    del () {
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  .pre {
    position: fixed;
    width: 1200px;
    height: 600px;
    top: 50px;
    left: 200px;
    background-color: rgb(79, 79, 86, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }
}
.img {
  display: flex;
  justify-content: center;
  img {
    width: 250px;
  }
}
.preimg {
  width: 400px;
}
</style>
